<template>
    <el-table :data="students" style="width: 100%">
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="gender" label="性别">
        </el-table-column>
        <el-table-column prop="age" label="年龄">
        </el-table-column>
        <el-table-column prop="classes.name" label="班级名称">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleUpdate(scope.row._id)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDel(scope.row._id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
import { mapActions, mapMutations } from 'vuex';
import { findById, remove } from '../../services/student';
export default {
    props: ["students"],
    methods: {
        async handleUpdate(id) {
            // let data = await findById(id);
            // this.$emit('setStudent', data);
            // this.$emit('setDialogFormVisible',true);
            this.fetchStudent(id);
            this.setUpdateVisible(true);
        },
        async handleDel(id) {
            this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await remove(id);
                this.$emit('show');
            })

        },
        ...mapMutations('student',['setUpdateVisible']),
        ...mapActions('student',['fetchStudent'])
    }
}
</script>
<style>

</style>